<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- 依次引入react核心依赖、react DOM依赖、babel依赖(注意引入顺序)-->
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
    <!-- JSX基本语法 -->
    <script type="text/babel">
      // 1、条件渲染
      // const user = {
      //   name: '大牧',
      //   age: 18,
      //   score: 99,
      //   gender: 'male',
      //   img: './images/header.jpg'
      // }

      // // 声明式UI中使用
      // const div = (
      //   <div>
      //     <h2>条件渲染</h2>
      //     <p>
      //       {user.name} 是否成年：
      //       {user.age >= 18 ? <h3>成年</h3> : <h3>暂未成年</h3>}
      //     </p>
      //     <p>
      //       {user.name} 成绩是否合格：
      //       {user.score > 60 ? <h3>及格</h3> : <h3>不合格</h3>}
      //     </p>
      //   </div>
      // )

      // 2、列表渲染
      const goodsList = [
        { id: 2, name: '华为META50', price: 6999, stock: 100 },
        { id: 1, name: '苹果15', price: 5999, stock: 120 }
      ]

      const div = (
        <table>
          <tr>
            <th>序号</th>
            <th>名称</th>
            <th>单价</th>
            <th>库存</th>
            <th>操作</th>
          </tr>
          {goodsList.map(goods => (
            <tr>
              <td>{goods.id}</td>
              <td>{goods.name}</td>
              <td>{goods.price}</td>
              <td>{goods.stock}</td>
              <td>
                <button>编辑</button>
                <button>删除</button>
              </td>
            </tr>
          ))}
        </table>
      )

      // 渲染展示数据
      ReactDOM.render(div, document.getElementById('app'))
    </script>
  </body>
</html>
